import React from 'react'
import { Button, Modal, message, Select, Input } from 'antd'
import { BaseListPage, IBaseListPageProps, IBaseListPageState, uaaApp, UdModal, http, UdModalForm, UdDatePicker, UdTable } from '@/lib'
import { columnRenders } from '../../../../lib/utils/columnRenders'
import apis from '@/apis/SystemSettings'
import _ from 'lodash'
import dayjs from 'dayjs'
import './list.css'
import { udOpenMdelHandel } from '../common/Udmodel'

const AuthorAdd = 'user_system_settings_outer_system_create'
const AuthorEdit = 'user_system_settings_outer_system_edit'
const AuthorDetal = 'user_system_settings_outer_system_detail'

const confirm = Modal.confirm
const Option = Select.Option

class ExternalSystem extends BaseListPage<IExternalSystemProps, IExternalSystemState> {

  private statusTranslate = {
    'IN_EFFECT': '生效中',
    'OFF_EFFECT': '已失效',
    'WAIT_EFFECT': '待生效',
  }

  private statusOptions = [...Object.keys(this.statusTranslate).map(key => ({ value: key, name: this.statusTranslate[key] }))]

  constructor(props: IExternalSystemProps) {
    super(props)

    this.state = {
      title: '外部系统API管理',
      queryApi: apis.ExternalSystemList,
      method: 'GET',
      conditions: [
        { id: 'systemName', label: '系统名称' },
        {
          id: 'status', label: '状态', render:
            <Select placeholder='请选择状态'>
              {this.statusOptions.map(({ value, name }) => <Option key={value} value={value}>{name}</Option>)}
            </Select>
        },
      ],
      rowKey: 'systemCode',
      columns: [
        ['系统编码', 'systemCode', null, { maxWidth: '260px' }],
        ['系统名称', 'systemName', null, { minWidth: '120px' }],
        ['密钥', 'secret', null, { minWidth: '200px' }],
        ['生效日期', 'beginTime', (text) => <span>{text && dayjs(text).format('YYYY-MM-DD')}</span>, { maxWidth: '300px' }],
        ['过期日期', 'endTime', (text) => <span>{dayjs(text).format('YYYY-MM-DD')}</span>, { maxWidth: '300px' }],
        ['状态', 'status', null, { minWidth: '60px' }],
        ['创建时间', 'createTime', (text) => <span>{text && dayjs(text).format('YYYY-MM-DD HH:mm:ss')}</span>, { maxWidth: '300px' }],
        ['创建人', 'createName', null, { fixedWidth: '60px' }],
        ['最近修改时间', 'updateTime', (text) => <span>{text && dayjs(text).format('YYYY-MM-DD HH:mm:ss')}</span>, { maxWidth: '300px' }],
        ['最近修改人', 'updateName', null, { fixedWidth: '60px' }],
        {
          title: '操作',
          dataIndex: 'operate',
          fixedWidth: '120px',
          fixed: 'right',
          render: columnRenders.operate([
            {
              title: '编辑资源', auth: AuthorEdit, action: (text, record) => this.openModalEdtil(record)
            },
            {
              title: '查看详情', auth: AuthorDetal, action: (text: any, record: any) => this.openModalDetail(record)
            }
          ])
        }
      ],
      leftBtns: [
        uaaApp.canUse(AuthorAdd) && <Button type='primary' onClick={() => this.openModalHandle()}>新增</Button>,
      ],
      tableProps: {
        scroll: { x: true },
        rowSelection: null
      }
    }
  }
  public openModalHandle = (record?) => { //新增

    udOpenMdelHandel('add', undefined, () => {
      this.query()
    })

  }

  public openModalEdtil = (record?) => { //编辑
    if (record) {
      const data = {
        systemCode: record.systemCode
      }
      http.get(apis.resourceDetail, { params: data }).then(res => {
        udOpenMdelHandel('edit', res.data, () => {
          this.query()
        })
      })
    }

  }
  public openModalDetail = (record?) => { //详情
    if (record) {
      const data = {
        systemCode: record.systemCode
      }
      http.get(apis.resourceDetail, { params: data }).then(res => {
        udOpenMdelHandel('detail', res.data)
      })
    }



  }
}


interface IExternalSystemProps extends IBaseListPageProps {

}

interface IExternalSystemState extends IBaseListPageState {

}

export default ExternalSystem



